import React, { Component } from "react";
import { Link } from "react-router-dom";
import Header from "../../components/Header/Header";
import { Button, Form, Input, Toast } from "antd-mobile";
import { connect } from "react-redux";
import { actions, getUser } from "../../store/modules/login";
import { bindActionCreators } from "redux";

class Login extends Component {
  render() {
    let {
      user,
      l: { changeUser,doLogin },
      history:{push}
    } = this.props;
    return (
      <div>
        <Header register title="登录"></Header>
        <div>user:{JSON.stringify(user)}</div>
        <Form layout="horizontal">
          <Form.Item label="手机号" name="username">
            <Input
              placeholder="请输入手机号"
              clearable
              onChange={(v) =>changeUser("phone",v)}
            />
          </Form.Item>
          <Form.Item label="密码" name="password">
            <Input
              placeholder="请输入密码"
              clearable
              type="password"
              onChange={(v) =>changeUser("password",v)
              }
            />
          </Form.Item>
        </Form>
        <Button size="small" color="primary" onClick={() =>doLogin(push)}>
          登录
        </Button>
      </div>
    );
  }
}
const mapStateToProps = (state) => {
  return {
    user: getUser(state),
  };
};
const mapDispatchToProps = (dispatch) => {
  return {
    l: bindActionCreators(actions, dispatch),
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(Login);
